<template>
  <div class="hold-transition">
    <div class="content-header">
      <h1>
        用户设置
        <small>菜单管理</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户设置</el-breadcrumb-item>
        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <!-- 角色列表区域 -->
      <el-table :data="menuList" border stripe>
        <!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']"
              v-for="(item1, i1) in scope.row.children"
              :key="item1.id"
            >、
              <!-- 渲染一级权限 -->
              <el-col :span="8">
                <el-tag closable @close="removeRightById(item1.id)">{{
                  item1.title
                }}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="8">
                <el-tag>路径：{{ item1.path }}</el-tag>
              </el-col>
              <el-col :span="8">
                <el-tag>
                  <!-- <template slot-scope="scope"> -->
                  <!-- <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button> -->
                  <el-button
                    size="mini"
                    type="warning"
                    icon="el-icon-setting"
                    @click="showSetRightDialog(item1)"
                    >分配角色</el-button
                  >
                  <!-- </template> -->
                </el-tag>
                <br />
              </el-col>
              <hr />
            </el-row>

            <!-- <pre>
              {{scope.row}}
            </pre> -->
          </template>
        </el-table-column>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="菜单名称" prop="title"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-setting"
              @click="showSetRightDialog(scope.row)"
              >分配角色</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增和修改的对话框 -->
      <el-dialog title="分配角色" :visible.sync="setRightDialogVisible" width="50%" @close="setRightDialogClosed">
        <template>
              <el-tabs type="card">
                <!-- <el-tab-pane label="分配角色" name="second"> -->
                  <!-- <div class="checkScrol"> -->
                    <table class="datatable">
                      <thead>
                      <tr>
                        <th>选择</th>
                        <th>项目编码</th>
                        <th>项目名称</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="role in rolelist" :key="role.id">
                        <td>
                          <input :id="role.id" v-model="roleIds" type="checkbox" :value="role.id">
                        </td>
                        <!-- <td><label :for="c.id">{{c.id}}</label></td> -->
                        <td><label :for="role.id">{{role.roleCode}}</label></td>
                        <td><label :for="role.id">{{role.roleName}}</label></td>
                      </tr>
                      </tbody>
                    </table>
                  <!-- </div> -->
                <!-- </el-tab-pane> -->
              </el-tabs>
            </template>
         <span slot="footer" class="dialog-footer">
          <el-button @click="setRightDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="allotRoles()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 所有角色列表数据
      menuList: [],
      // 控制分配权限对话框的显示与隐藏
      setRightDialogVisible: false,
      // 所有权限的数据
      rolelist: [],
      // 树形控件的属性绑定对象
      treeProps: {
        label: "authName",
        children: "children",
      },
      // 默认选中的节点Id值数组
      roleIds: [],
      // 当前即将分配权限的角色id
      menuId: "",
    };
  },
  created() {
    this.getMenusList();
  },
  methods: {
    // 获取所有角色的列表
    async getMenusList() {
      const { data: res } = await this.$http.get(
        "api/menu/getMenus/" + this.$store.state.userInfo.username
      );
      console.log(res);
      if (!res.flag) {
        return this.$message.error("获取菜单列表失败！");
      }

      this.menuList = res.data;
    },
    // 展示分配权限的对话框
    async showSetRightDialog(menu) {
      console.log("  menu id"+menu.id);

      this.menuId = menu.id;
      // 获取所有权限的数据
      const { data: res } = await this.$http.get("api/menu/getRole");

      if (!res.flag) {
        return this.$message.error("获取权限数据失败！");
      }

      // 把获取到的权限数据保存到 data 中
      this.rolelist = res.data;
      // this.handleSelectionChange(this.rolelist);
      // console.log("getRole");
      // console.log(this.rolelist);
      this.setRightDialogVisible = true;
      this.getRoleIds();
    },
    async getRoleIds(){
      const { data: res } = await this.$http.get("api/menu/getRoleByMenuId/"+this.menuId);
      if (!res.flag) {
        return this.$message.error("获取权限数据失败！");
      }
      // console.log("getRoleIds");
      this.roleIds=res.data
      // console.log(this.roleVo.roleIds)

    },
    // 监听分配权限对话框的关闭事件
    setRightDialogClosed() {
      this.roleIds = [];
      this.menuId="";
      this.roleVo="";
    },
    // 点击为角色分配权限
    async allotRoles() {
      let param = {
        roleIds: this.roleIds,
        menuId: this.menuId
      }
      // console.log(this.roleVo)
      const { data: res } = await this.$http.post('api/menu/updateRoles',param);

      if (!res.flag) {
        return this.$message.error("分配权限失败！");
      }
      this.$message.success("分配权限成功！");
      this.getMenusList();
      this.setRightDialogVisible = false;
    },
  },
};
</script>
<style type="text/css">
        .datatable
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        .datatable td, .datatable th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        .datatable thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        .datatable tr:nth-child(odd)
        {
            background: #fff;
        }
        .datatable tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>
